/* // 5. 请求用户信息
userInfoAPI({}, res => {
    var { user_pic } = res.data.data;
    if (user_pic) $("#image").attr("src", user_pic);

    // 1. 初始化裁剪插件
    var cropper = new Cropper($("#image")[0], {
        aspectRatio: 1, // 裁剪图层的横纵比例
        preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
    });

    // 2. 上传图片 - 点击事件
    $(".select").on("click", () => {
        // JS触发一次file的点击事件 -弹出选择文件窗口
        $("#file").click();
    })

    // 3. 监测 - 文件选择器的变化
    $("#file").on("change", ev => {
        console.log(ev.target.files);
        // 取到选择的一个文件
        var [file] = ev.target.files;
        // URL是JS内置对象 - 用于做前端图片 - 本地预览的(无需后台)
        // File对象是一种特殊的Blob类型(Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取)
        // 使用 Blob 创建一个指向类型化数组的URL - 有了url才能用在img的src上
        var imgUrl = URL.createObjectURL(file);
        // 替换拆剪区域图片
        cropper.replace(imgUrl)
    })

    // 4. 点击确定 - 上传图片给后台
    $(".sure").on("click", () => {
        // 把裁剪的图片 - 转成base64字符串
        const canvas = cropper.getCroppedCanvas({
            width: 100,
            height: 100
          });
        var base64 = canvas.toDataURL('image/png'); // canvas标签 转base64字符串

        // 注意这里的参数, 必须url编码否则后台接收有问题
        var arg = "avatar=" + encodeURIComponent(base64);
      
        // 调用接口
        upAvatarAPI(arg, () => {
            // 成功后 - 让父级index.html页面 - 调用它index.js里window上的getUserInfo()方法, 重新请求用户头像, 并且铺设页面
            window.parent.getUserInfo();
        });
    })
});



 */

// 0.获取用户信息
getUInfoAPI({}, res => {
    let { user_pic } = res.data.data;
    if (user_pic != null) {
        cropper.replace(user_pic)
    }
})
1.// 实现图片的剪裁样式
const image = document.getElementById('image')
const cropper = new Cropper(image, {
    aspectRatio: 1,
    preview: $('.img-preview')
});
//2.点击按钮--让隐藏的按钮触发
$('.select').on('click', e => {
    $('#file').click();
})
// 3.选择文件窗口出现-选中文件单击打开(上传图片)
$('#file').on('change', function (e) {
    var url = URL.createObjectURL(this.files[0]);
    cropper.replace(url)
})
// 4.确定按钮--点击事件
//具体看简书截图以及大事件第二天下午的1视频
$('.sure').on('click', e => {
    var canvas = cropper.getCroppedCanvas({
        width: 100,
        height: 100
    });
    var base64Str = canvas.toDataURL('image/jpeg')
    base64Str = encodeURIComponent(base64Str)
    var argStr = "avatar=" + base64Str;
    unpHeadImgAPI(argStr, function (res) {
        window.parent.getInfo();
        console.log(res);
    })
})